<template>
  <nav class="sub-nav">
    <div class="nav-items">
      <router-link to="/trump" class="nav-item">Trump Administration</router-link>
      <div class="nav-item live">
        <span class="live-dot"></span>
        LIVE Updates
        <span class="time-ago">26m ago</span>
      </div>
      <router-link to="/major-moves" class="nav-item">Major Moves</router-link>
      <router-link to="/disappearing-words" class="nav-item">Disappearing Words</router-link>
      <router-link to="/fired-rehired" class="nav-item">Fired, Then Rehired</router-link>
      <router-link to="/lawsuits" class="nav-item">Lawsuits Tracker</router-link>
      <router-link to="/legal" class="nav-item">Is That Legal?</router-link>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'SubNav'
}
</script>

<style scoped>
.sub-nav {
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  padding: 8px 16px;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}

.nav-items {
  display: flex;
  gap: 24px;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
}

.nav-item {
  font-size: 14px;
  color: #333;
  text-decoration: none;
  padding: 4px 0;
  position: relative;
}

.nav-item:hover {
  color: #000;
}

.live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #cc0000;
  font-weight: 600;
}

.live-dot {
  width: 8px;
  height: 8px;
  background-color: #cc0000;
  border-radius: 50%;
  display: inline-block;
}

.time-ago {
  color: #666;
  font-size: 12px;
  font-weight: normal;
  margin-left: 6px;
}

[theme-mode="dark"] .sub-nav {
  background-color: #242424;
  border-color: #333;
}

[theme-mode="dark"] .nav-item {
  color: #ccc;
}

[theme-mode="dark"] .nav-item:hover {
  color: #fff;
}

[theme-mode="dark"] .time-ago {
  color: #999;
}
</style> 